<!-- 后台管理页面侧边栏 -->
<template>
<div class="common-layout">
	<el-container>
  <el-header class="header" style="width:100%;background-color: aqua;">
    <div class="title">后台管理系统</div> 
	</el-header>
  <el-container style="height: calc(100vh - 80px)">
    <el-aside class="aside" >
      <el-menu
      :router="true"

      class="el-menu"
      background-color="#545c64"
      text-color="#fff"
      active-text-color="#ffd04b">
      <el-sub-menu index="/admin">
        <template #title>
          <span>用户管理</span>
        </template>
          <el-menu-item index="/admin/users">用户列表</el-menu-item>
      </el-sub-menu>
      <el-sub-menu index="2">
        <template #title>
          <span>图片管理</span>
        </template>
        <el-menu-item index="/admin/upload">图片上传</el-menu-item>

      </el-sub-menu>
      <el-sub-menu index="3">
        <template #title>
          <span>物流线路管理</span>
        </template>
        <el-menu-item index="/admin/wuliu">路线管理</el-menu-item>
      </el-sub-menu>
    </el-menu>
		</el-aside>
    <el-main class="main">

			<router-view>
			</router-view>
		</el-main>
  </el-container>
</el-container>
</div>
</template>


<style scoped>
.common-layout{
  margin:0 0;
  padding: 0 0;
  width: 100%;
  height: calc(100vh);
  background-color:#ccc
}
.main{
  background-color: rgb(222, 210, 210);
}
.header{
  display: flex;
  height: 80px;
  line-height: 80px;
}
.aside{
  width: 150px;
}
.title{
  display: flex;
  flex-direction: column;
  font-size: 20px;
  font-weight: bolder;
}
.main{
  margin: 0 0;
  padding: 0 0;
}

</style>